<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>12-上传图片验证</title>
	
<style type="text/css">




</style>
</head>
<body>
	
	<label for="file">上传图片类型</label>
	<input type="file" name="" id="file">



<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">

	function $(id){
		return typeof id === 'string' ? document.getElementById(id):null;
	}


	window.onload = function(){
	// 1.获取标签
		var file = document.getElementById("file")
	//2.监听图片选择的变化
	//  通过file标签绑定一个onchange函数，当选择了这任意一个文件之后就会执行函数
	file.onchange = function(){
		
		//2-1： 获取上传的图片路径,这里的文件的value值为路径
		var path = this.value  //C:\fakepath\banner1.jpg  这里获取了一个图片的路径
		// console.log(path)

		//2-2：获取文件后缀 . 在路径字符串中占的位置
		var loc = path.lastIndexOf('.')
		console.log(loc)

		//2-3:截取路径名称的后缀名
		var suffix = path.substr( loc)

		//2-4:同意统一转小写
		var lower_suffix = suffix.toLowerCase()

		//2-5:判断文件的后缀名是否为自定义指定格式
		if( lower_suffix==='.jpg' ){
			alert('你上传的图片格式正确，为jpg格式')
		}else{
			alert('你上传的不是jpg格式')
		}
	}

	}






</script>


</body>
</html>